<template lang='pug'>
  .navbar-item(@click="onclick")
    van-icon.icon(:name="icon")
    |{{name}}
</template>

<script type='text/ecmascript-6'>
  export default {
    props: {
      icon: String,
      name: String,
      to: String,
    },
    data() {
      return {

      }
    },
    methods: {
      onclick() {
        this.$router.push(this.to)
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
.navbar-item
  position relative
  padding 1.5rem 0
  flex 1
  text-align center
  &:not(:last-child)::after
    content ''
    position absolute
    right 0
    top 0
    bottom 0
    width 1px
    background-color $color-main
    transform scaleX(0.3)
  .van-icon
    vertical-align middle
    margin-right 0.3rem
</style>
